<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <STYLE>
        .contentDiv{
            display:inline-block;
            margin:5px 15px;
            width:100px;
            height:100px;
            border-radius:100px;
            -webkit-border-radius:100px;
            -moz-border-radius:100px;
            border:2px solid #fff;
            box-shadow:0 0 4px #ccc;
            overflow:hidden;
        }
        /*图片的样式*/
        .contentDiv img{
            width:100%;
            min-height:100%;
        }

        .contentDiv span {
            visibility: hidden;
            width: 100px;
            height: 100px;
            position: absolute;
            color: white;
            text-align: center;
            line-height: 120px;
            left: 0;
            top: 0;
            border-radius: 50px;
            background: #000;
            opacity: .5;
        }

        .contentDiv:hover span {
            visibility: visible;
        }
    </STYLE>

</head>
<body>
<div class="panel admin-panel">
    <!--<div class="panel-head"><strong class="icon-reorder"> 个人信息</strong></div>-->
    <div class="padding border-bottom">
        <div class="contentDiv layui-form-item layui-inline">
            <img  th:src="@{/upload/userimg/}+${wallet.getAvatar()}"/>
            <span id="avatar"><i class="layui-icon" style="font-size: 50px;line-height: 100px">&#xe660;</i></span>
        </div>
        <div class="layui-form-item layui-inline" >
            <h2><font th:text="${user.getUserAccount()}"></font><img th:src="@{/show/images/grade/Grade_}+${wallet.getGrade}+'.png'"/></h2>
            <h2>您的身份：<font th:text="${user.getRname()}"></font></h2>
        </div>
    </div>
    <div class="padding border-bottom" style="height: 60px">
        <div class="layui-form-item layui-inline" >
            <h3 style="margin-top: 5px; font-size: 18px;color: red">我的金币 <font color="black" th:text="${wallet.getGolds()}">0</font></h3>
        </div>
        <div class="layui-form-item layui-inline" style="margin:0 50px">
            <button id="pay" style="margin: 0" class="layui-btn layui-btn-radius layui-btn-danger">去充值</button>
        </div>
        |
        <div class="layui-form-item layui-inline" style="margin:0 50px">
            <button id="oneHome" style="margin: 0" class="layui-btn layui-btn-radius layui-btn-normal">个人首页
                <i class="layui-icon" style="color: #fff;">&#xe602;</i>
            </button>
        </div>
    </div>
    <div class="panel-head"><strong class="icon-reorder"> 基本信息(点击即可编辑)</strong></div>
    <table class="table table-hover text-center" id="show">
        <tr>
            <td width="15%" >用户笔名</td>
            <td width="85%" align="left" th:text="${user.getUserAccount()}">基本信息</td>
        </tr>
        <tr>
            <td width="15%" >账 户 ID</td>
            <td width="85%" align="left" th:text="${user.getUserId()}">基本信息</td>
        </tr>
        <tr>
            <td width="15%" >性 别</td>
            <td width="85%" align="left" th:text="${wallet.getSex()}">基本信息</td>
        </tr>
        <tr>
            <td width="15%" >所在地</td>
            <td width="85%" align="left" id="suozai"></td>
        </tr>
        <tr>
            <td width="15%" >生 日</td>
            <td width="85%" align="left" th:text="${wallet.getBirthday()}">基本信息</td>
        </tr>
        <tr>
            <td width="15%" >个人简介</td>
            <td width="85%" align="left" ><p th:text="${wallet.getUserinfo()}"></p></td>
        </tr>
    </table>
    <form id="form" class="layui-form layui-form-pane">
            <div id="update">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">用户笔名：</label>
                    <div class="layui-input-block">
                        <input class="layui-input" id="userAccount" name="userAccount" th:value="${user.getUserAccount()}"  autocomplete="off"/>
                    </div>
                </div>
            <br/>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">用户ID：</label>
                <div class="layui-input-block ">
                    <input class="layui-input" type="text" id="userId" name="userId" th:value="${user.getUserId()}" readOnly  autocomplete="off"/>
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label layui-inline">所在地区：</label>
                <div class="layui-input-inline">
                    <select id="province" name="province" lay-filter="province">
                        <option value="">请选择省</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="display: none;">
                    <select id="city" name="city" lay-filter="city">
                        <option value="">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="display: none;">
                    <select id="area" name="area" lay-filter="area">
                        <option value="">请选择县/区</option>
                    </select>
                </div>
            </div>
            <br/>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">性别：</label>
                    <div class="layui-input-block"style="width: 185px">
                        <input type="radio" name="sex" th:checked="${wallet.getSex()=='男'}" value="男" title="男" checked="">
                        <input type="radio" name="sex" th:checked="${wallet.getSex()=='女'}" value="女" title="女">
                    </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">出生日期：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="birthday" name="birthday" th:value="${wallet.getBirthday()}" placeholder="yyyy-MM-dd">
                </div>
            </div>
            <br/>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">个人简介</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea" id="userinfo" name="userinfo" th:text="${wallet.getUserinfo()}" style="height: 10px;"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-radius layui-btn-primary layui-border-blue" id="exit">取消</button>
                    <button id="updateUserInfo" class="layui-btn layui-btn-radius layui-btn-normal" >提交</button>
                </div>
            </div>
        </div>
    </form>
</div>

</body>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<script th:src="@{/js/pintuer.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/area.js}"></script>
<script th:src="@{/js/areaInitialize.js}"></script>
<script th:inline="javascript">
    var array=Array;
    //初始数据
    var areaData = Area;
    var $form;
    var form;
    var $;


    layui.use(['jquery', 'form'], function() {
        $ = layui.jquery;
        form = layui.form;
        $form = $('form');
        loadProvince();
    });

    $(function () {
        /*$("#show").hover(function(){
            stop();
            $(this).hide("slow");
        },function(){
            stop();
            $(this).show("slow");
        });*/
        array[0]=[[${wallet.getProvince}]];
        array[1]=[[${wallet.getCity}]];
        array[2]=[[${wallet.getArea}]];
        $("#update").hide();

        $("#show").click(function(){
            $(this).hide("slow");
            $("#update").show();
        });
        $("#exit").click(function(){
            $("#show").show("slow");
            $("#update").hide();
        });
        selectProvince();
    });
    layui.use(['form', 'laydate'], function() {
        var form = layui.form,
            laydate = layui.laydate;
        laydate.render({
            elem: '#birthday'
            ,theme: '#393D49'
        });
        //loadProvince();
    });
    layui.use('layer',function(){
        var layer=layui.layer;
    });
    function addRole(){
        layer.open({
            type: 2,
            area: ['600px', '360px'],
            title:'设置头像',
            resize: false,
            shadeClose: true, //点击遮罩关闭
            content: [[@{/user/updateUserImg/}]]
    });
    }
</script>
<script>
    $("#updateUserInfo").click(function () {
        $.ajax({
            type:'post',
            url:'/user/updateUserBase',
            data:$("#form").serialize(),
            dataType: "text",
            async: false,
            success:function (data) {
                if (data == 1){
                    alert("成功")
                }else if (data==2){
                    alert("笔名已被使用")
                }
            }
        });
    });

    $("#avatar").click(function () {
            addRole()
    })

    $("#oneHome").click(function () {
       // window.location.href="/userCenter/show/"+[[${user.getUserId}]]
        window.open( "/userCenter/show/"+[[${user.getUserId}]], "_blank");
    })
    $("#pay").click(function () {
        window.open("/payment/toPay");
    })
</script>
</html>